<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>账户信息</title>
  <!-- Bootstrap 5 CSS -->
  <link href="../vandor/bootstrap-5.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 图标库 -->
  <link rel="stylesheet" href="../vandor/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="../css/usercenter.css">
</head>
<body>
<!-- 顶部标题栏 -->
<div class="header">
  <div class="container">
    <div class="header-content">
      <a href="javascript:history.back()" class="back-btn">
        <i class="fas fa-arrow-left"></i>
      </a>
      <h1 class="header-title">账户信息</h1>
    </div>
  </div>
</div>

<!-- 账户信息内容 -->
<div class="profile-container">
  <div class="profile-card">
    <div class="profile-header">
      <div class="avatar-container">
        <img src="../image/customer.jpg" class="user-avatar" alt="用户头像">
        <div class="edit-avatar">
          <i class="fas fa-pen"></i>
        </div>
      </div>
      <h2 id="userName" class="user-name"></h2>
      <div class="user-status" id="userStatus">加载中...</div>
    </div>

    <div class="info-list">
      <div class="info-item">
        <div class="info-icon">
          <i class="fas fa-user"></i>
        </div>
        <div class="info-content">
          <div class="info-label">姓名</div>
          <div id="fullName" class="info-value">加载中...</div>
        </div>
      </div>

      <div class="info-item">
        <div class="info-icon">
          <i class="fas fa-mobile-alt"></i>
        </div>
        <div class="info-content">
          <div class="info-label">手机号码</div>
          <div id="phoneNumber" class="info-value">加载中...</div>
        </div>
      </div>

      <div class="info-item">
        <div class="info-icon">
          <i class="fas fa-venus-mars"></i>
        </div>
        <div class="info-content">
          <div class="info-label">性别</div>
          <div id="gender" class="info-value">加载中...</div>
        </div>
      </div>

      <div class="info-item">
        <div class="info-icon">
          <i class="fas fa-birthday-cake"></i>
        </div>
        <div class="info-content">
          <div class="info-label">出生日期</div>
          <div id="birthday" class="info-value">加载中...</div>
        </div>
      </div>
    </div>
  </div>

  <button class="btn-logout" id="logoutBtn">
    <i class="fas fa-sign-out-alt"></i> 退出登录
  </button>

  <div class="security-notice">
    <div class="security-title">
      <i class="fas fa-shield-alt"></i> 账户安全提示
    </div>
    <div class="security-text">
      请定期更新您的密码，不要向他人透露您的账户信息。我们不会通过电话或邮件向您索要密码。如有任何安全问题，请立即联系客服。
    </div>
  </div>
</div>

<div class="footer">
  © 2025 智能E生 · 版权所有
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="../vandor/bootstrap-5.3.7-dist/js/bootstrap.bundle.min.js"></script>

<script>

  var storage = window.sessionStorage;

  // 页面加载时初始化
  document.addEventListener('DOMContentLoaded', initPage);

  // 渲染用户信息
  function renderUserInfo(userData) {
    document.getElementById('userName').textContent = userData.username;
    document.getElementById('userStatus').textContent =
            `普通会员 · 注册于${formatDate(userData.createtime)}`;
    /*document.getElementById('fullName').textContent = userData.fullName;*/
    document.getElementById('phoneNumber').textContent = formatPhoneNumber(userData.phone);
    document.getElementById('gender').textContent = formatSex(userData.sex);
    document.getElementById('birthday').textContent = formatBirthday(userData.birth);
  }

  function formatSex(sex){
    var sextext = "未知"
    if(sex == 0){
      sextext = "男";
    }else if(sex == 1){
      sextext = "女"
    }
    return sextext;
  }

  // 格式化电话号码
  function formatPhoneNumber(phone) {
    return phone.substring(0, 3) + '****' + phone.substring(7);
  }

  // 格式化日期
  function formatDate(dateString) {
    const date = new Date(dateString);
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  }

  // 格式化生日
  function formatBirthday(dateString) {
    const date = new Date(dateString);
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  }

  // 初始化页面
  async function initPage() {

      var userModel = storage.getItem("userModel");
      if(userModel){
        var userData = JSON.parse(userModel);
        if(userData){
          renderUserInfo(userData);
        }else{
          alert("请登录系统")
          window.location.href = "login.html";
        }
      }else{
        alert("请登录系统")
        window.location.href = "login.html";
      }
  }

  // 退出登录功能
  document.getElementById('logoutBtn').addEventListener('click', function() {
    // 添加点击反馈
    this.style.transform = 'scale(0.98)';
    this.style.backgroundColor = '#fff0f0';

    // 确认对话框
    const confirmLogout = confirm('确定要退出登录吗？');

    if (confirmLogout) {
      // 这里应该是实际的退出登录逻辑
      console.log('用户退出登录');

      // 模拟退出登录后的跳转
      setTimeout(() => {
        storage.clear();
        window.location.href = 'login.html';
      }, 500);
    } else {
      // 恢复按钮状态
      this.style.transform = '';
      this.style.backgroundColor = '';
    }
  });


</script>
</body>
</html>